<template>
  <div>
    <head-container></head-container>
    <div class="editor_main">
      <p class="pos">当前位置：
        <router-link to="/" tag="span">首页</router-link>>
        <router-link to="/forum" tag="span">睿那论坛</router-link>>
        <span>发帖</span>
      </p>
      <div class="editor">
        <div class="title_head">
          <!-- <select v-model="cid">
            <option disabled value="">请选择</option>
            <option :value="item.id"
              v-for="item in ftcates" 
              :key="item.id">{{item.title}}</option>
          </select> -->
          <el-select @change='getId' v-model="value" placeholder="请选择">
            <el-option
              v-for="item in ftcates"
              :key="item.id"
              :value = item.title>
            </el-option>
          </el-select>
          <!-- <input class="post_title" type="text" v-model="title"> -->
          <el-input v-model="title" placeholder="请输入标题"></el-input>
        </div>
        <vue-editor v-model="content"></vue-editor>
        <div class="send_post">
          <el-button type="primary" :loading="isLoading" @click="sendPost">发送</el-button>
        </div>
      </div>
    </div>
    
    <foot-container></foot-container>
  </div>
</template>
<script>
import Vue from 'vue'
import { VueEditor } from 'vue2-editor'
import headContainer from '../components/headContainer'
import footContainer from '../components/footContainer'
export default {
  name:"Editor",
  data(){
    return{
      cid:'',//板块id
      content:'',//评论内容
      ftcates:[],//所有板块名称
      title:'',//发帖名
      value:'',
      isLoading:false,
    }
  },
  components:{
    VueEditor,
    headContainer,
    footContainer
  },
  mounted(){
    this.cid = this.$route.query.plate || '';
    //获取所有板块名称
    this.GLOBAL.request({
      baseURL:this.GLOBAL.API_RNTY_URL,
      url:'ftcates/list'
    }).then(({data:data})=>{
      this.ftcates = data
    })
  },
  methods:{
    getId(val){
      let id = this.ftcates.filter(item=>item.title == val)[0].id
      this.cid = id;
    },
    sendPost(){
      //发帖
      this.isLoading = true,
      this.GLOBAL.tokenRequest({
        method:'post',
        baseURL:this.GLOBAL.API_RNTY_URL,
        url:'ftopics/post',
        data:{
          title:this.title,
          content:this.content,
          cid:this.cid
        }
      }).then(({data:data})=>{
        this.isLoading = false;
        if(data.status){
          this.$message({
            message: '帖子发表成功',
            type: 'success'
          });
          setTimeout(()=>this.$router.push({name:'list',query:{id:this.cid}}),1000)
        }else{
          this.$message({
            message: data.message,
            type: 'error'
          });
        }
      })
    }
  }
}
</script>
<style scoped>
.title_head{
  margin-bottom:15px;
  display: flex;
  align-items: center;
}
select, input{
  outline: none;
  height:26px;
  border:1px solid #d1d1d1;
}
.title_head .post_title{
  width:725px;
  margin-left: 10px;
}
.send_post{
  text-align: right;
}

.editor{
  margin:100px auto 0;
  width:840px;
  box-sizing: border-box;
}
.editor_main{
  width:1200px;
  margin:0 auto;
  padding-top:116px;
  min-height:696px;
}
.editor_main .pos{
  margin-bottom:20px; 
}
.editor_main .pos span{
  cursor: pointer;
}
</style>

